<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>武汉理工大学出版社</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.min.js"></script>
	<script src="js/upload.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color: #fff;">
<!-- 头部 -->
<div id="header"></div>

<div id="bootstrap"></div>

<div class="sales_zone" id="app">
    <div class="content" v-html="content">

    </div>

    <div class="sales_zone_cont">

        <!-- 基本信息 -->
        <div class="user_form">
            <ul>
                <li>
                    <p class="key">作者</p>
                    <div class="val">
                        <input type="text" v-model="applicantName" placeholder="请输入作者">
                    </div>
                </li>
                <li>
                    <p class="key">电话</p>
                    <div class="val">
                        <input type="text" v-model="applicantPhone" placeholder="请输入电话">
                    </div>
                </li>
                <li>
                    <p class="key">地址</p>
                    <div class="val">
                        <input type="text" v-model="applicantAddress" placeholder="请输入地址">
                    </div>
                </li>
                <li class="fileList">
                    <p class="key">附件</p>
                    <div class="attachment">
                        <div id="drop_area"></div>
                    </div>
                </li>
                <li style="display: none;" class="fileShow">
                    <p class="key">附件</p>
                    <div class="wangrui">
                        <div>
							 <a href="" id="view">
								<img src="./static/word.png" class="fileUrl"
                                 style="width: 0.2rem; height: 0.2rem; vertical-align: middle;"
                                 onclick="showFile()">
							</a>
							<img style="width: 0.15rem; height: 0.15rem; margin-left: 0.1rem;" src="./static/delete.png" onclick="onDelete()"/>
                            <input  style="display: none" class="fileVal" v-model="attachment">
                        </div>
                    </div>
					
                </li>
                <li style="width: 100%;">
                    <p class="key">备注</p>
                    <div class="val" style="height: 1rem;display: block;padding: 0.1rem;">
                        <textarea placeholder="请输入地址" v-model="remark" name="" id="" cols="30" rows="10"></textarea>
                    </div>
                </li>
            </ul>
        </div>
        <div class="but" @click="authorContribution">确认提交</div>
    </div>
	
	<!-- 加载中 -->
	<div class="load_page" v-show="isLoadingShow">
		<div class="content">
			<div class="item">
				<i class="loader --1"></i>
			</div>
		</div>
	</div>
</div>


<!-- 底部 -->
<div id="footer"></div>

</body>

<script>
    const App = {
        data() {
            return {
                hidden: true,
                content: '',
                applicantAddress: '',
                applicantName: '',
                applicantPhone: '',
                attachment: '',
                remark: '',
				isLoadingShow:false
            }
        },
        mounted(){
			sessionStorage.setItem('href',window.location.href);
            this.getContent()
        },
        methods: {
            async getContent() {
                let that = this;
				that.isLoadingShow = true
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/sampleApplicationApi/getSinglePage",
                }).then(function (res) {
                      that.content = res.data.data;
					  that.isLoadingShow = false
                })
            },
            // 作者投稿
            async authorContribution() {
                let that = this;
				that.isLoadingShow = true
                var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
                var result = re.test(that.applicantPhone);
                if(!result) {
                    alert("手机号码格式不正确！");
                    that.isLoadingShow = false
                    return;//若手机号码格式不正确则返回false
                }
                let param = {
                    applicantAddress: that.applicantAddress,
                    applicantName: that.applicantName,
                    applicantPhone: that.applicantPhone,
                    attachment: $($('.wangrui a')[0]).attr("href").substring(26),
                    remark: that.remark,
                }
                await axios({
                    method: "POST",
                    url: "http://dbs.wutp.com.cn/CM-API/sampleApplicationApi/authorContribution",
                    data: param,
                    header: {"Content-Type": "application/json"}
                }).then(function (res) {
                    alert(res.data.msg);
                    that.applicantAddress = '';
                    that.applicantName = '';
                    that.applicantPhone = '';
                    $(".fileList").attr("style", "display:flex")
                    $(".fileShow").attr("style", "display:none")
                    that.remark = '';
					that.isLoadingShow = false
                })
            }

        }
    };
    Vue.createApp(App).mount('#app');
	
	var dragImgUpload = new DragImgUpload("#drop_area",{
		callback:function (files) {
			//回调函数，可以传递给后台等等
			var file = files[0];
			console.log(file.name);
            $(".fileList").attr("style", "display:none")
            $(".fileShow").attr("style", "display:flex")
            // $('.wangrui p').text(file.name);
            const formData = new FormData();
            formData.append("file", file, file.name);

            $.ajax({
                url: "http://dbs.wutp.com.cn/CM-API/common/upload",
                type: "POST",
                processData: false,
                contentType: false,
                data: formData,
                success: function (res) {
                    console.log("res.path",res.path)
                    this.attachment = res.path;
					$("#view").attr("href","http://dbs.wutp.com.cn"+res.path);
                }
            });
		}
	})
	
	function onDelete(){
		$(".fileList").attr("style", "display:flex")
		$(".fileShow").attr("style", "display:none")
	}
    function showFile() {
        const attachment = $('.wangrui input').val();
        window.location.href = "http://dbs.wutp.com.cn"+attachment

    }



</script>

<style>
    .upbut{
        width: 100%;
        height: 0.4rem;
        border-radius: 0.04rem;
        background-color: #fff;
        color: #999;
        border: none;
        cursor: pointer;
        text-align: left;
    }
    input {
        border: none;
    }

    .sales_zone {
        display: flex;
        margin: 0 3rem;
    }

    .content {
        width: 72%;
        margin-right: 0.3rem;
        margin-top: 0rem;
    }

    .sales_zone_cont {
        flex: 1;
        background-color: #f3f3f3;
        height: 5.6rem;
    }

    .user_form {
        display: flex;
        justify-content: center;
        padding-top: 0.32rem;
    }

    .user_form ul li {
        display: flex;
        align-items: center;
        margin-bottom: 0.2rem;
    }

    .user_form ul li .key {
        text-align: right;
        font-size: 0.16rem;
        margin-right: 0.24rem;
        line-height: 0.16rem;
    }

    .user_form ul li .attachment {
        width: 0.5rem;
        height: 0.5rem;
        border: 0.01rem solid #d2d2d2;
        border-radius: 0.06rem;
        /* padding: 0 0.14rem; */
        background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
    }

    .user_form ul li .val {
        width: 2rem;
        height: 0.5rem;
        border: 0.01rem solid #d2d2d2;
        border-radius: 0.06rem;
        display: flex;
        align-items: center;
        padding: 0 0.14rem;
        background-color: #fff;
    }

    .user_form ul li .val input {
        width: 100%;
        background: none;
    }

    .user_form .ul {
        display: flex;
        align-items: center;
        margin: 0 0.12rem;
        cursor: pointer;
    }

    .user_form .ul img {
        width: 0.18rem;
        height: 0.18rem;
        margin-right: 0.06rem
    }

    .user_form .ul p {
        font-size: 0.18rem;
        color: #333;
        line-height: 0.18rem;
    }

    .user_form .item {
        margin-right: 0.2rem;
    }

    .user_form ul li .val textarea {
        border: none;
        width: 100%;
        height: 100%;
        outline: none;
        background: none;
    }

    .but {
        width: 2.2rem;
        height: 0.56rem;
        background-color: #212f52;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.16rem;
        border-radius: 0;
        margin: 0.3rem auto 0;
    }
</style>
</html>
